<template>
    <div v-bind:class="[activeClass, borderClass]"></div>
    <div v-bind:class="[isActive ? activeClass : '' ,borderClass]"></div>
    <div v-bind:class="[{active:isActive}, borderClass]"></div>
</template>

<script setup>
import{ref, reactive} from 'vue'
const isActive =true
const activeClass=ref('active')
const borderClass=ref('border')
</script>

<style scoped>
.active{
    width: 100%;
    height: 10px;
    margin-bottom: 2px;
    background-color:rgb(59, 192, 241);
}
.border{
    border: 2px solid rgb(0, 0, 0);
}

</style>